@extends('layouts.app')

@section('style')

    <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="/plugins/morris/morris.css">

    <style>
        th, td {white-space: nowrap;}
    </style>

@endsection

@section('content')

    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                参与者管理
                <small>参与者列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 管理后台</a></li>
                <li><a href="#">参与者管理</a></li>
                <li class="active">参与者列表</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">参与者列表</h3>
                        </div>
                        <div class="box-body">
                            <table id="user-list" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>openID</th>
                                    <th>微信昵称</th>
                                    <th>用户名称</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th>身份证号码</th>
                                    <th>手机号</th>
                                    <th>邮件</th>
                                    <th>头像</th>
                                    <th>注册时间</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>openID</th>
                                    <th>微信昵称</th>
                                    <th>用户名称</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th>身份证号码</th>
                                    <th>手机号</th>
                                    <th>邮件</th>
                                    <th>头像</th>
                                    <th>注册时间</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <section class="col-lg-12">
                   <div id="participant-chart" style="position: relative; height: 600px;"></div>
                </section>
            </div>
        </section>
    </div>

@endsection

@section('javascript')

    <script src="{{ asset('/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
    <script src="{{ asset('/plugins/fastclick/fastclick.js') }}"></script>
    <script src="{{ asset('/js/app.min.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="/plugins/morris/morris.min.js"></script>

    <script>
        $(function () {
            var line = new Morris.Line({
                element: 'participant-chart',
                data: {!! $chartData !!},
                /*data: [
                  {date: '2011 Q1', count: 2666},
                  {date: '2011 Q2', count: 2778},
                  {date: '2011 Q3', count: 4912},
                  {date: '2011 Q4', count: 3767},
                  {date: '2012 Q1', count: 6810},
                  {date: '2012 Q2', count: 5670},
                  {date: '2012 Q3', count: 4820},
                  {date: '2012 Q4', count: 15073},
                  {date: '2013 Q1', count: 10687},
                  {date: '2013 Q2', count: 8432}
                ],*/
                xkey: 'date',
                ykeys: ['count'],
                labels: ['数量']
              });

            $('#user-list').DataTable({
                language: {
                    'url': '/plugins/datatables/language/zh-CN.json'
                },
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "ajax": "/admin/participant/list"
            });
        });
    </script>

@endsection